<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>动态详情</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/dynamic.css" />
</head>

<body>
	<div id="app" v-cloak>
		<div class="wrap flex-wrap flex-vertical">
			<header id="header">
				<div class="header-wrap border-bottom">
					<div class="header-left" @click="goback">
						<i class="iconfont icon-pre"></i>
					</div>
					<div class="header-title">动态详情</div>
				</div>
			</header>
			<div class="flex-con" style="overflow-y: auto;">
				<div class="dynamic-item dynamic-detail">
					<div class="user-wrap" @click="openUserHome(member.member_id)">
						<div class="user-avatar">
							<img :src="member.avatar + '?imageView2/1/w/100/h/100'" alt="">
						</div>
						<div class="user-info">
							<div class="name-wrap">
								<div class="name">
									<span class="name-text">{{member.name}}</span>
									<span :class="['age' + member.sex, 'age']">
										<i :class="['icon-sex-' + member.sex, 'icon']"></i>{{member.age}}</span>
								</div>
							</div>
							<div class="occupation">{{dynamic_data.city}}</div>
						</div>
						<div class="time">{{dynamic_data.created_at | timeFormat}}</div>
					</div>
					<div class="dynamic-con">
						<div class="description" v-if="!!dynamic_data.description">{{dynamic_data.description}}</div>
						<div class="media-wrap" v-if="files.length != 0">
							<div v-for="(media, i) in files" :key="media.id" :class="['media-item', 'media' + files.length]">
								<div v-if="media.type == '1'" :class="['video']" :style="{backgroundImage: 'url('+ media.filename + '?vframe/jpg/offset/1' +')'}"
									@click="openDynamicDetailVideo">
									<div class="play-icon">
										<i class="iconfont icon-bofang"></i>
									</div>
								</div>
								<div v-if="media.type == '0'" :class="['img']" @click="openImgBrowser(i)">
									<img :src="media.filename + '?imageView2/1/w/300/h/300'" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="comment-wrap">
					<div class="comment-total">
						共有{{dynamic_data.comment_size}}条评论
					</div>
					<div class="comment-list">
						<div v-if="commentList.length != 0" class="comment-item" v-for="(item, index) in commentList" :key="item.id">
							<div class="avatar-wrap" @click="openUserHome(item.member_id)">
								<img :src="item.member.avatar + '?imageView2/1/w/100/h/100'" alt="">
							</div>
							<div class="comment-info">
								<div class="member-name">
									<span class="name">{{item.member.name}}</span>
									<span class="time">{{item.created_at | timeFormat}}</span>
								</div>
								<div class="comment-con">{{item.description}}</div>
							</div>
						</div>
						<div v-else class="comment-none">暂无评论</div>
					</div>
				</div>
			</div>
			<div class="input-wrap">
				<input v-model="comment" type="text" :placeholder="'回复' + member.name">
				<button type="button" @click="sendBtn">发送</button>
			</div>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
	var app, UIPhotoViewer;
	apiready = function () {
		$api.fixStatusBar($api.dom('#header'));
		api.setStatusBarStyle({
			style: 'light',
		});
		UIPhotoViewer = api.require('UIPhotoViewer');
		app = new Vue({
			el: '#app',
			data: {
				activeIndex: 1,
				dynamic_data: {},
				member: {},
				files: [],
				commentList: [],
				comment: '',
				isback: false,
			},
			created: function () {
				api.addEventListener({
					name: 'keyback'
				}, function (ret, err) {
					api.sendEvent({
						name: 'getDynamicList',
					});
					api.closeWin();
				});
			},
			mounted: function () {
				var _this = this;
				_this.getDynamicDetail();
			},
			methods: {
				goback: function () {
					api.sendEvent({
						name: 'getDynamicList',
					});
					api.closeWin();
				},

				getDynamicDetail: function () {
					var _this = this;
					api.ajax({
						url: baseUrl + 'dynamic/detail',
						method: 'get',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								id: api.pageParam.id
							}
						}
					}, function (ret, err) {
						if (ret.status == 200) {
							_this.dynamic_data = ret.data.info;
							_this.member = ret.data.info.member;
							_this.files = ret.data.info.files;
							_this.commentList = ret.data.list;
						}
						if (ret.status == 400) {
							api.toast({
								msg: ret.message[0],
								duration: 2000,
								location: 'bottom'
							});
							setTimeout(function () {
								api.closeWin();
							}, 1000);
						}
					})
				},

				openUserHome: function (id) {
					api.openWin({
						name: 'user_home',
						url: 'user_home.html',
						slidBackEnabled: false,
						pageParam: {
							member_id: id
						}
					});
				},

				openImgBrowser: function (index) {
					var _this = this;
					_this.isback = true;
					var tempImgs = [];
					for (var i = 0; i < _this.files.length; i++) {
						tempImgs.push(_this.files[i].filename);
					}
					UIPhotoViewer.open({
						images: tempImgs,
						activeIndex: index,
						bgColor: '#000',
						zoomEnabled: true
					}, function (ret, err) {
						if (ret) {
							if (ret.eventType == 'click') {
								UIPhotoViewer.close();
							}
						}
					});
				},

				openDynamicDetailVideo: function () {
					api.openWin({
						name: 'dynamic_detail_video',
						url: 'dynamic_detail_video.html',
						slidBackEnabled: false,
						pageParam: {
							id: api.pageParam.id
						}
					});
				},

				sendBtn: function () {
					var _this = this;
					if (this.comment == '') {
						api.toast({
							msg: '请输入评论内容',
							duration: 2000,
							location: 'bottom'
						});
						return false;
					}
					api.showProgress({
						title: '',
						text: ''
					});
					api.ajax({
						url: baseUrl + 'dynamic/comment',
						method: 'post',
						headers: {
							token: $api.getStorage('deviceToken')
						},
						data: {
							values: {
								uid: $api.getStorage('uid'),
								id: api.pageParam.id,
								desc: _this.comment
							}
						}
					}, function (ret, err) {
						api.hideProgress();
						api.toast({
							msg: ret.message[0],
						});
						if (ret.status == 200) {
							_this.comment = '';
							_this.getDynamicDetail();
						}
					})
				},
			},
			filters: {
				timeFormat: function (value) {
					var now = new Date().getTime(),
						oldTime = new Date(value).getTime(),
						difference = now - oldTime;
					result = '',
						minute = 1000 * 60,
						hour = minute * 60,
						day = hour * 24,
						halfamonth = day * 15,
						month = day * 30,
						year = month * 12,
						_year = difference / year,
						_month = difference / month,
						_week = difference / (7 * day),
						_day = difference / day,
						_hour = difference / hour,
						_min = difference / minute;
					if (_year >= 1) {
						result = ~~(_year) + " 年前"
					} else if (_month >= 1) {
						result = ~~(_month) + " 个月前"
					} else if (_week >= 1) {
						result = ~~(_week) + " 周前"
					} else if (_day >= 1) {
						result = ~~(_day) + " 天前"
					} else if (_hour >= 1) {
						result = ~~(_hour) + " 小时前"
					} else if (_min >= 1) {
						result = ~~(_min) + " 分钟前"
					} else result = "刚刚";
					return result;
				},
			}
		})
	}
</script>